<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modbus/HTTP</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/modbus.css">

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/binary-parser/binary-parser.js"></script>
<script src="js/modbus.js"></script>
<body>

	<div data-role="page" id="page-setting">
		<div data-role="header">
			<h1>Modbus/HTTP</h1>
		</div>
		<div class="ui-content">

			<label for="host">主机：</label>
			<input placeholder="主机地址（域名或IP）" id="host" value="192.168.3.46" type="text"></input>

			<label for="port">端口：</label>
			<input pattern="[0-9]*" placeholder="端口（默认为80）" min="1" max="65535" id="port" value="80" type="number"></input>

			<label for="device-address">设备地址：</label>
			<input name="number" pattern="[0-9]*" min="0" max="247" placeholder="设备地址(0~247)" id="device-address" value="18" type="number"></input>

			<label for="select-choice-function-code" class="select">功能码：</label>
			<select name="select-choice-function-code" id="select-choice-function-code" data-native-menu="false">
				<option>功能码</option>
				<option value="3">Read Holding Registers(0x03)</option>
				<option value="4" selected="selected">Read Input Registers(0x04)</option>
			</select>

			<label for="register-address">寄存器起始地址：</label>
			<input name="number" pattern="[0-9]*" min="0" max="65535" placeholder="寄存器起始地址(0~65535)" id="register-address" value="30000" type="number"></input>

			<label for="register-quantity">寄存器数目：</label>
			<input name="number" pattern="[0-9]*" min="1" max="125" placeholder="寄存器数目(1~128)" id="register-quantity" value="8" type="number"></input>

            <label for="select-choice-display-type" class="select">显示类型：</label>
			<select name="select-choice-display-type" id="select-choice-display-type" data-native-menu="false">
				<option>显示类型</option>
				<option value="traffic" selected="selected">Show Traffic</option>
				<option value="data-int-16">Show Integer (16bits)</option>
                <option value="data-int-32">Show Integer (32bits)</option>
                <option value="data-float">Show Float (32bits)</option>
			</select>

			<a id="btn-start" class="ui-btn ui-corner-all ui-btn-icon-right ui-icon-carat-r">开始</a>
		</div>
	</div>

	<div data-role="page" id="page-traffic">
		<div data-role="header" data-position="fixed">
			<a id="btn-back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
			<h1>Modbus Traffic</h1>
		</div>
		<!-- /header -->
		<div class="ui-content">
			<ul id="listview-traffic" data-role="listview" data-inset="true">
			</ul>
		</div>
		<div data-role="footer" data-position="fixed">
			<h1 id="traffic-count">Success 0 / Total 0</h1>
			<div data-role="navbar">
				<ul>
					<li><a href="#" id="traffic-start" data-icon="refresh" class="ui-btn-active">Start</a></li>
					<li><a href="#" id="traffic-stop" data-icon="delete">Stop</a></li>
					<li><a href="#" id="traffic-auto-scroll" data-icon="gear">Auto Scroll</a></li>
					<li><a href="#" id="traffic-clear" data-icon="recycle">Clear</a></li>
				</ul>
			</div>
			<!-- /navbar -->
		</div>
		<!-- /footer -->
	</div>

	<div data-role="page" id="page-data">
		<div data-role="header" data-position="fixed">
			<a id="page-data-btn-back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
			<h1>Modbus Data</h1>
		</div>
		<!-- /header -->
		<div class="ui-content">
            <ul id="listview-data" data-role="listview">
            </ul>
		</div>
	</div>

</body>

</head>
</html>
